<template>
  <div class="userOperate-page">
    <AreaWarp :padding="true">
      <h3>筛选条件</h3>

      <div class="searchCondition" v-for="(item,index) in searchInfo" :key="index">
        <el-select
          v-model="item.selectType"
          @change="selectChange(index,item.selectType)"
          placeholder="请选择"
        >
          <el-option
            v-for="item in selectTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 数字类选择 -->
        <div class="select-warp" v-if="item.type==1">
          <el-select v-model="item.operator" placeholder="请选择运算符">
            <el-option
              v-for="item in operatorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input class="inputWidth" v-model="item.number" type="number" placeholder="请输入数字"></el-input>
        </div>

        <!-- 时间类选择 -->
        <div class="select-warp" v-else-if="item.type==2">
          <el-input class="inputWidth" v-model="item.timeSelect" disabled></el-input>
          <el-date-picker
            v-model="item.time"
            :picker-options="pickerOptions"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :editable="false"
          ></el-date-picker>
        </div>
      </div>
      <div class="tips">*针对是非判断的指标，数字1表示“是”，数字0表示“否”</div>
      <div class="tips">*操作系统的指标，数字1表示“苹果系统”，数字2表示“安卓系统”</div>
      <BtnWarp>
        <el-button type="success" icon="el-icon-plus" @click="addCondition">添加搜索条件</el-button>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <!-- 查询结果 -->
    <AreaTitleWarp :title="'用户运营'">
      <el-button v-if="exportShow" type="primary" @click="exportData">导出</el-button>
    </AreaTitleWarp>
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
      >
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <!-- <el-table-column prop="realname" label="姓名"></el-table-column> -->
        <el-table-column prop="mobile" label="手机号"></el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="page"
        :page-size="size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
        :page-sizes="[20, 50, 100]"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import Operate from "../../../assets/js/operate.js";
export default {
  data() {
    return {
      searchInfo: [
        {
          id: 1,
          selectType: "",
          timeSelect: "固定时段",
          operator: "",
          time: "",
          number: "",
          type: 0
        }
      ],
      page: 1,
      size: 20,
      selectList: [],
      selectTypeOptions: [],
      operatorOptions: [
        {
          label: ">",
          value: ">"
        },
        {
          label: "<",
          value: "<"
        },
        {
          label: ">=",
          value: ">="
        },
        {
          label: "<=",
          value: "<="
        },
        {
          label: "<>",
          value: "<>"
        },
        {
          label: "=",
          value: "="
        }
      ],
      condition: "",
      conditions: [],
      tableInfo: {
        list: [],
        total: 0
      },
      exportShow: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.size = val;
      that.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.page = typeof currentPage == "number" ? currentPage : 1;
      that.searchCondition();
      if (that.conditions.length == 0) {
        that.showMsg("请选择筛选条件", "error");
        return;
      }
      that.ajaxJson({
        url: "/operation/userOperate/list",
        data: {
          page: that.page,
          size: that.size,
          conditions: that.conditions
        },
        success: function(res) {
          if (res.code == 0) {
            that.tableInfo = res.data;
            that.conditions = [];
          }
        }
      });
    },
    //重置
    reset() {
      let that = this;
      that.searchInfo = [
        {
          id: 1,
          selectType: "",
          timeSelect: "固定时段",
          operator: "",
          time: "",
          number: "",
          type: 0
        }
      ];
      that.page = 1;
      that.size = 20;
      that.condition = "";
      that.conditions = [];
      that.tableInfo = {
        list: [],
        total: 0
      };
    },
    //取得用户运营筛选指标
    selectType() {
      let that = this;
      that.ajaxJson({
        url: "/static/userOperate/listIndex",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            let selectType = res.data.list;
            that.selectList = res.data.list;
            selectType.forEach((item, index) => {
              that.selectTypeOptions.push({
                value: item.columnName,
                label: item.name
              });
            });
          }
        }
      });
    },
    //选择修改
    selectChange(id, val) {
      let that = this;
      that.selectList.forEach((item, index, arr) => {
        if (arr[index].columnName == val) {
          that.searchInfo[id].type = arr[index].type;
        }
      });
    },
    //添加筛选条件
    addCondition() {
      let that = this;
      let id = Number(that.searchInfo[that.searchInfo.length - 1].id) + 1;
      let selectObj = {
        id,
        selectType: "",
        timeSelect: "固定时段",
        operator: "",
        time: "",
        number: "",
        type: 0
      };
      that.searchInfo.push(selectObj);
    },
    //导出
    exportData() {
      let that = this;
      that.searchCondition();
      let url =
        that.host +
        "/operation/userOperate/exportList?appId=" +
        that.$store.state.id;
      if (that.conditions.length) {
        url += "&conditions=" + that.conditions;
      } else {
        that.showMsg("请选择或完善筛选条件", "error");
        return;
      }
      that.conditions = []
      window.open(url);
    },
    //是否显示导出
    isExportShow() {
      let that = this;
      let isExportShow = that
        .urlPermissions()
        .indexOf("/operation/userOperate/exportList");
      if (isExportShow == "-1") {
        that.exportShow = false;
      } else {
        that.exportShow = true;
      }
    },
    //搜索条件压入
    searchCondition() {
      let that = this;
      that.searchInfo.forEach(item => {
        let x = {
          selectType: item.selectType,
          operator: item.operator,
          time: item.time,
          number: item.number,
          type: item.type
        };

        let operate = new Operate(x);
        let reqData = operate.getState();
        if (reqData.selectType) {
          if (reqData.type == "1") {
            if (!reqData.operator) {
              that.showMsg("请选择运算符", "error");
              return;
            } else {
              if (!reqData.number) {
                that.showMsg("请输入数字", "error");
                return;
              } else {
                that.condition =
                  reqData.selectType +
                  " " +
                  reqData.operator +
                  " " +
                  reqData.number;
                that.conditions.push(that.condition);
                that.condition = "";
              }
            }
          } else if (reqData.type == "2") {
            if (!item.time) {
              that.showMsg("请选择时间", "error");
            } else {
              that.condition =
                reqData.selectType +
                " BETWEEN " +
                reqData.startTime +
                " AND " +
                reqData.endTime;
            }
            that.conditions.push(that.condition);
            that.condition = "";
          }
        }
      });
    }
  },
  created() {
    let that = this;
    Promise.all([that.isExportShow()]).then(arr => {
      that.selectType();
    });
  }
};
</script>
<style lang="less">
.userOperate-page {
  .searchCondition {
    margin-bottom: 10px;
    .select-warp {
      display: inline;
      .inputWidth {
        width: 200px;
      }
    }
  }
  .tips {
    font-size: 14px;
  }
}
</style>
